<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统配置管理</title>
    <link href="../static/vendor/element-ui@2.15.9/lib/theme-chalk/index.css" rel="stylesheet" />
    
    <link href="../static/eladmin/css/eladmin.min.css" rel="stylesheet" />
    <style>
        .settings-page .el-card__header {
            border-bottom: none;
        }

        .settings-page .el-card__body {
            padding: 0
        }
    </style>
</head>

<body>
    <div id="app" class="settings-page dark-theme" v-cloak>
        <el-card class="mb-2 card-sm card-search">
            <div slot="header">
                <h4>配置管理</h4>
            </div>
            <div class="d-flex flex-column" style="height:100%">
                <el-tabs type="border-card">
                    <el-tab-pane label="用户管理">
                        <el-form ref="form" :model="form" size="small" label-width="80px">
                            <el-form-item label="活动名称">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                            <el-form-item label="活动区域">
                                <el-select v-model="form.region" placeholder="请选择活动区域">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="活动时间">
                                <el-col :span="11">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                        style="width: 100%;">
                                    </el-date-picker>
                                </el-col>
                                <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;">
                                    </el-time-picker>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="即时配送">
                                <el-switch v-model="form.delivery"></el-switch>
                            </el-form-item>
                            <el-form-item label="活动性质">
                                <el-checkbox-group v-model="form.type">
                                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="特殊资源">
                                <el-radio-group v-model="form.resource">
                                    <el-radio label="线上品牌商赞助"></el-radio>
                                    <el-radio label="线下场地免费"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="活动形式">
                                <el-input type="textarea" v-model="form.desc"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
    </div>

    <script src="../static/vendor/vue@2.6.14/dist/vue.min.js"></script>
    <script src="../static/vendor/element-ui@2.15.9/lib/index.js"></script>
    <script src="../static/vendor/axios@0.27.2/dist/axios.min.js"></script>
    <script src="../static/vendor/mockjs@1.1.0/dist/mock.js?v=1.0.0"></script>
    <script src="../static/eladmin/js/elcomponents.min.js"></script>
    <script src="../static/js/utils.min.js"></script>
    <script src="../static/mock/admin/sys-configs.js?v=1.0.0"></script>
    <script src="../static/mock/admin/api-route.js?v=1.0.0"></script>
    <script>
        // 使用模拟数据
        useMockData();

        // 获取标准消息格式的 axios 实例
        var vuiAjax = EsUtils.getStdAjax();

        /**
         * 系统配置管理页面
         */
        const App = {
            el: "#app",
            name: "SysConfigsIndex",
            data() {
                return {
                    form: {
                        name: '',
                        region: '',
                        date1: '',
                        date2: '',
                        delivery: false,
                        type: [],
                        resource: '',
                        desc: ''
                    },
                    // 页面标题
                    title: "系统配置管理",
                    total: 400,
                    page: 1,
                    pageSize: 10,
                    // 数据加载状态
                    loadingState: {
                        refresh: false,
                        search: false,
                        paging: false,
                        list: false,
                    },
                    // 可视状态
                    visibleState: {
                        search: true,
                    },
                    // 查询数据
                    dataOfSearch: {
                        data: {}
                    },
                    // 表格数据
                    dataOfMain: [],
                    // 已勾选的表格行
                    dataOfCheckedRows: [],
                    dataOfCheckedKeys: [],
                };
            },
            methods: {
                onSubmit() {
                    console.log('submit!');
                },
                // 加载列表数据
                loadData() {
                    this.loadingState.list = true;
                    // 通过传参 _success 来控制返回消息的成功状态。
                    this.dataOfSearch._success = true;
                    console.log('[加载数据列表] 查询参数= ', this.dataOfSearch);
                    vuiAjax.get(this.apiRoute.sysConfigsIndex, { params: this.dataOfSearch })
                        .then(ret => {
                            this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
                            console.log("[加载数据列表] 返回结果= ", ret);
                            if (!ret.success) {
                                this.$message.error(ret.message);
                                return;
                            }
                            this.dataOfMain = ret.data.data;
                        })
                        .catch(msgInfo => {
                            this.loadingState.refresh = this.loadingState.list = this.loadingState.search = this.loadingState.paging = false;
                            this.$message.error(msgInfo.message);
                        });
                },
                // 表格行勾选事件
                onCheckTableRows(checkedRows) {
                    console.log("[表格行勾选事件] ", checkedRows);
                    this.dataOfCheckedRows = checkedRows;
                    this.dataOfCheckedKeys = checkedRows.map(item => item.id)
                },
                // 点击工具栏（表头工具栏和单元格工具栏）
                onClickToolbar(name, item) {
                    console.log("[点击工具栏] ", name, item);
                    switch (name) {
                        case "create":
                            console.log("点击按钮 工具栏 - 新增");
                            window.parent.globalApp.showFormDialog('新增系统配置', 'sys-configs/edit.html', window, { height: '420px' })
                            break;
                        case "edit-multi":
                            console.log("点击按钮 工具栏 - 批量编辑", this.dataOfCheckedKeys.join(','));
                            break;
                        case "copy-multi":
                            console.log("点击按钮 工具栏 - 批量复制", this.dataOfCheckedKeys.join(','));
                            break;
                        case "delete-multi":
                            console.log("点击按钮 工具栏 - 批量删除", this.dataOfCheckedKeys.join(','));
                            if (this.dataOfCheckedKeys.length == 0) {
                                this.$message.info('未勾选任何记录');
                                return;
                            }
                            this.$confirm('您确定删除' + this.dataOfCheckedKeys.length + '条记录吗?', '提示', {
                                confirmButtonText: '删除',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                vuiAjax
                                    .get(this.apiRoute.sysConfigsDelete, { params: { id: this.dataOfCheckedKeys } })
                                    .then((ret) => {
                                        console.log("[批量删除] ", ret);
                                        if (!ret.success) {
                                            this.$message.error(ret.message);
                                            return;
                                        }
                                        this.loadData();
                                    })
                                    .catch((msgInfo) => {
                                        this.$message.error(msgInfo.message);
                                    });
                            });

                            break;
                        case "import":
                            console.log("点击按钮 工具栏 - 导入");
                            // 设置导入表单参数等
                            break;
                        case "export":
                            console.log("点击按钮 工具栏 - 导出");
                            break;
                        case "refresh":
                            console.log("点击按钮 工具栏 - 刷新");
                            this.loadingState.refresh = true;
                            this.loadData();
                            break;
                        case "edit":
                            console.log("点击按钮 单元格 - 编辑");
                            window.parent.globalApp.showFormDialog('编辑系统配置', 'sys-configs/edit.html?id=' + item.id, window, { height: '420px' })
                            break;
                        case "delete":
                            console.log("点击按钮 单元格 - 删除");
                            break;
                        case "copy":
                            console.log("点击按钮 单元格 - 复制");
                            break;
                        default:
                            break;
                    }
                },
                // 查询操作
                onSearch() {
                    this.loadingState.search = true;
                    this.loadData();
                },
                // 分页事件
                onPaging(type, val) {
                    this.loadingState.paging = true
                    console.log('[分页事件] ', type, val);
                    switch (type) {
                        case 'page':
                            this.page = val;
                            break;
                        case 'size':
                            this.page = 1;
                            this.pageSize = val;
                            break;
                        default:
                            break;
                    }
                    this.loadData();
                },
                // 导入数据
                onImportExcel(success, ret) {
                    if (!success) {
                        this.$message.error(ret.message);
                        return;
                    }
                    console.log("[导入数据] 上传成功 ", ret);
                },
            },
            created() {
                this.loadData();
            },
        };

        // 全局加载组件
        Vue.prototype.apiRoute = new ApiRoute();
        Vue.use(ElComponents);
        // 创建应用实例
        var app = new Vue(App)
    </script>
</body>

</html>